<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javaScript" src="../js/vue.js"></script>
    <script type="text/javascript" src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <link rel="stylesheet" href="/css/personal/release.css"></link>
</head>
<style type="text/css">
    .theme-ke ._bgcolor {
        background: #3072F6;
    }

    .theme-ke ._color {
        color: #3072F6;
    }

    .theme-ke ._bdcolor {
        border-color: #3072F6;
    }

    .theme-lianjia ._bgcolor {
        background: #39AC6A;
    }

    .theme-lianjia ._color {
        color: #39AC6A;
    }

    .theme-lianjia ._bdcolor {
        border-color: #39AC6A;
    }

    .login_layer {
        font-size: 14px;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1003;
        display: none;
    }

    .login_layer > * {
        box-sizing: content-box;
    }

    .login_layer .link-btn {
        cursor: pointer;
        text-decoration: underline;
    }

    .login_layer .link-btn:hover {
        text-decoration: underline;
    }

    .login_layer .login_bg {
        width: 100%;
        height: 100%;
        background-color: #000;
        opacity: 0.6;
        filter: alpha(opacity=60);
        position: fixed;
        top: 0;
        left: 0;
    }

    .login_layer .login_panel {
        opacity: 1;
        filter: alpha(opacity=100);
        width: 300px;
        padding: 40px;
        height: auto;
        background-color: #FFF;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 1px 3px 14px rgba(0, 0, 0, 0.3);
        border-radius: 2px;
    }

    .login_layer .login_panel a {
        cursor: pointer;
    }

    .login_layer .login_panel .login_panel_close {
        cursor: pointer;
        position: absolute;
        right: 15px;
        top: 15px;
        padding: 4px;
        font-size: 18px;
    }

    .login_layer .login_panel .login_panel_label {
        min-height: 20px;
        line-height: 20px;
        margin-bottom: 40px;
        padding-left: 0;
    }

    .login_layer .login_panel .login_panel_label .login_panel_title {
        margin: 0;
        float: left;
        font-size: 20px;
        color: #101D37;
        font-weight: bold;
    }

    .login_layer .login_panel .login_panel_label .login_panel_hint {
        color: #AAA;
        padding: 40px 0 0;
        line-height: 1;
        font-size: 14px;
    }

    .login_layer .login_panel .form .input_box {
        padding: 0;
        border-radius: 2px;
    }

    .login_layer .login_panel .form .input_box .form_input_item {
        overflow: hidden;
        border: 1px solid #DBDBDB;
        color: #555;
        clear: both;
        height: 50px;
        line-height: 50px;
        position: relative;
        margin-top: -1px;
    }

    .login_layer .login_panel .form .input_box .form_input_item.input_error {
        border: 1px solid #DB4C3F;
        margin-top: -1px;
        z-index: 2;
    }

    .login_layer .login_panel .form .input_box .form_input_item.first_child {
        border-radius: 2px 2px 0 0;
    }

    .login_layer .login_panel .form .input_box .form_input_item.last_child {
        border-radius: 0 0 2px 2px;
    }

    .login_layer .login_panel .form .input_box .form_input_item input {
        border: 0;
        padding: 0 0 0 16px;
        width: 100%;
        height: 50px;
        line-height: 50px;
        color: #101D37;
        font-size: 14px;
        outline: none;
    }

    .login_layer .login_panel .form .input_box .form_input_item input::placeholder {
        color: #BBB;
    }

    .login_layer .login_panel .form .input_box .form_input_item input.code_type {
        width: 151px;
        float: left;
    }

    .login_layer .login_panel .form .input_box .form_input_item input.password_type {
        width: 242px;
        float: left;
        padding-right: 10px;
    }

    .login_layer .login_panel .form .input_box .form_input_item .password-view {
        cursor: pointer;
        display: inline-block;
        width: 18px;
        height: 12px;
        background-image: url();
    }

    .login_layer .login_panel .form .input_box .form_input_item .verifyimg {
        float: right;
        height: 45px;
        width: 125px;
    }

    .login_layer .login_panel .form .input_box .form_input_item .addtional_a {
        line-height: 50px;
        color: #101D37;
        float: right;
    }

    .login_layer .login_panel .form .input_box .form_input_item .addtional_a em {
        padding: 0 16px;
        border-left: 1px solid #DBDBDB;
        font-style: normal;
    }

    .login_layer .login_panel .form .login_error {
        color: #DB4C3F;
        padding: 24px 0 0;
        line-height: 14px;
    }

    .login_layer .login_panel .form .login_voice a {
        text-decoration: underline;
        color: #101D37;
        cursor: pointer;
    }

    .login_layer .login_panel .form .login_remember,
    .login_layer .login_panel .form .login_protocol {
        color: #555;
        clear: both;
        position: relative;
        line-height: 23px;
        margin: 24px 0;
        overflow: hidden;
    }

    .login_layer .login_panel .form .login_remember .checkbox-btn,
    .login_layer .login_panel .form .login_protocol .checkbox-btn {
        cursor: pointer;
        float: left;
    }

    .login_layer .login_panel .form .login_remember .checkbox-btn input[type="checkbox"][value="1"] + .checkbox,
    .login_layer .login_panel .form .login_protocol .checkbox-btn input[type="checkbox"][value="1"] + .checkbox {
        background-image: url();
        background-position: center;
        background-repeat: no-repeat;
        background-size: 12px 10px;
    }

    .login_layer .login_panel .form .login_remember .checkbox-btn .checkbox,
    .login_layer .login_panel .form .login_protocol .checkbox-btn .checkbox {
        display: inline-block;
        width: 16px;
        height: 16px;
        border: 1px solid #DBDBDB;
        border-radius: 2px;
        position: relative;
        margin-right: 6px;
        cursor: pointer;
        line-height: 47px;
    }

    .login_layer .login_panel .form .login_remember .checkbox-btn .checkbox.active,
    .login_layer .login_panel .form .login_protocol .checkbox-btn .checkbox.active {
        background-image: url();
        background-position: center;
        background-repeat: no-repeat;
        background-size: 12px 10px;
    }

    .login_layer .login_panel .form .login_remember .checkbox-btn .mind-login,
    .login_layer .login_panel .form .login_protocol .checkbox-btn .mind-login {
        float: none;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
    }

    .login_layer .login_panel .form .login_remember .login_panel_forget_password,
    .login_layer .login_panel .form .login_protocol .login_panel_forget_password {
        float: right;
        color: #101D37;
    }

    .login_layer .login_panel .form .login_panel_op {
        display: block;
        width: 300px;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        font-weight: bold;
        border: 0;
        cursor: pointer;
        background: noset;
        color: #FFF;
        text-align: center;
        border-radius: 2px;
        margin-top: 24px;
    }

    .login_layer .login_panel .form .login_panel_op:hover {
        opacity: 0.9;
        text-decoration: none;
    }

    .login_layer .login_panel .form .change_login_type {
        padding: 24px 0 0;
        height: 14px;
        line-height: 14px;
        color: noset;
        display: inline-block;
    }

    .login_layer .login_panel .form .login_panel_change_login_type .link-btn {
        text-decoration: underline;
    }

    .login_layer .login_panel .form .login_panel_change_login_type .link-btn:hover {
        color: noset;
    }

    .login_layer .login_panel .form .captcha .msg .error {
        display: none;
    }

    .login_layer .login_panel .set_password_success {
        display: none;
        text-align: center;
    }

    .login_layer .login_panel .set_password_success .succ_tit {
        font-weight: bold;
        font-size: 18px;
    }

    .login_layer .login_panel .set_password_success .succ_desc {
        font-size: 14px;
        margin-top: 20px;
    }

    .login_layer .login_panel .set_password_success .succ_desc a {
        color: noset;
        text-decoration: none;
    }

    .login_layer .login_panel .set_password_success .succ_desc a:hover {
        text-decoration: underline;
    }
</style>

<body id="app">
<div style="background-color: #f5f5f5;">
    <div style="height: 60px;background-color: #39ac6a;padding-left: 20%;line-height: 60px;">
        <span class="headerSpanFont">租房</span>
        <span class="headerSpanFont">发布房源</span>


        <span id="login_table">

        <span class="headerSpanFont" style="margin-left: 10%;margin-right: 0px;" id="login_show"
              v-on:click="login_show">登录</span>/
        <span class="btn-resgiter" id="register_show" v-on:click="register_show()">注册</span>
        </span>
        <span class="top__aside fr hide" id="user_box">
            <a href="https://hz.lianjia.com/zufang/" id="userName">{{user.userName}}</a>
            <a id="logout_btn" v-on:click="login_out">退出</a>
            <div class="menu-pop">
                <i class="allow"></i>
                <ul class="menu-list lj">
                    <li class="menu-item"><a href="#" target="_blank">我的关注</a></li>
                    <li class="menu-item"><a href="#" target="_blank">最近联系</a></li>
                    <li class="menu-item"><a href="#" target="_blank">浏览记录</a></li>
                </ul>
            </div>
        </span>
    </div>
    <div style="width: 100%;margin-top: 3%;">
        <div style="margin-left: 28%;">

            <div style="width: 15%;height: 600px;display: inline-block;margin-right: 30px;vertical-align:top;background-color: white;">
                <div style="text-align: center;">
                    <img src="/html/imgs/guanbi.png" style="width: 100px;">
                    <p>userName</p>
                </div>
                <div style="height: 50px;line-height:50px;text-align: center;">

                    <a href="#"
                       style="color: black;text-decoration: none;display: inline-block;width: 100%;height: 100%;">收藏的房源</a>
                </div>
                <div style="height: 50px;line-height:50px;text-align: center;background-color: #39ac6a;">
                    <a href="#"
                       style="text-decoration: none;display: inline-block;width: 100%;height: 100%;color: white;">
                        出租的房源
                    </a>
                </div>
                <div style="height: 50px;line-height:50px;text-align: left;">
                    <a href="#"
                       style="text-decoration: none;display: inline-block;width: 100%;height: 100%;padding-left: 26%; color: black;">历史记录</a>
                </div>
                <div style="height: 50px;line-height:50px;text-align: left;">
                    <a href="#"
                       style="text-decoration: none;display: inline-block;width: 100%;height: 100%;padding-left: 26%; color: black;">历史订单</a>
                </div>
            </div>
            <div style="width: 50%;height: 600px;display: inline-block;vertical-align:top;background-color: white;">
                <span>共</span><span>0</span><span>套房源</span>

                <div style="margin-top: 30px;">
                    <img src="/html/imgs/jiahao.png">
                    <div style="display: inline-block;vertical-align: top;width: 320px;">
                        <a href="#" style="text-decoration: none;color: black;font-size: 16px;">整租·杭州碧桂园 3室1厅 西南</a>
                        <address>地址</address>
                        <p>面积</p>
                        <p>户型</p>
                    </div>
                    <div style="display: inline-block;vertical-align: top;">
                        <p style="color: red;font-size: 20px;font-weight: 500px;">1200元/月</p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<div id="loginModel" class="login_layer theme-lianjia" style="display: none;">
    <div class="login_bg animated"></div>

    <div class="login_panel animated">
        <div class="login_panel_close" id="show_exit" v-on:click="show_exit()">×</div>

        <div class="login_box">
            <form class="form" id="login_form">
                <ul class="input_box">
                    <li class="form_input_item first_child phonenum">
                        <input class="phonenum_input" maxlength="11" placeholder="请输入手机号" type="text"
                               v-model="user.account">
                    </li>
                    <li class="form_input_item picverifycode" style="display: none;">
                        <input class="code_type picverifycode_input" placeholder="请输入验证码" type="text"
                               autocomplete="off"/>
                        <img class="verifyimg login_verify_img" src=""/>
                    </li>
                    <li class="form_input_item last_child messageverifycode" id="message" style="display: none;">
                        <input class="code_type messageverifycode_input" placeholder="请输入短信验证码" type="text"
                               autocomplete="off">
                        <a class="addtional_a send_login_message_verify">
                            <em>获取验证码</em>
                        </a>
                    </li>
                    <li class="form_input_item last_child password" id="password">
                        <input class="password_type password_input" placeholder="请输入密码" type="password"
                               autocomplete="current-password" v-model="user.password">
                        <em class="password-view"></em>
                    </li>
                    <li class="form_input_item last_child setpassword" style="display: none;" id="againPassword">
                        <input class="password_type setpassword_input" placeholder="请再次输入密码（最少8位，数字+字母）"
                               v-model="againPassword" type="password" autocomplete="current-password">
                        <em class="password-view"></em>
                    </li>
                </ul>

                <div class="btn confirm_btn login_panel_op login_submit _bgcolor" id="login_button" ref="login_button"
                     v-on:click="login()"></div>
                <div class="login_panel_change_login_type">
                    <p style="color:#AAA;margin-top: 10px;font-size: 12px;line-height: 14px;">登录即代表同意<a
                            class="link-btn _color" href="https://www.lianjia.com/privacy" target="_blank">《隐私政策》</a>及<a
                            class="link-btn _color" href="https://www.lianjia.com/zhuanti/protocol" target="_blank">《用户使用协议》</a>
                    </p>
                </div>
            </form>
        </div>

        <div class="set_password_success" style="display: none;">
            <div class="succ_tit">修改密码成功</div>
            <div class="succ_desc">欢迎回来，<a class="tologin _color">点击这里去登录</a></div>
        </div>

    </div>
</div>
</body>
<script>
    var a = window.screen.width;
    console.log(a)
    var dd = document.getElementById("app");
    dd.style.width = a + "px";
</script>
<script src="/js/login.js"></script>

</html>